<template>
    <div>
        <!--这是轮播图区域-->
        <mt-swipe :auto="4000">
            <mt-swipe-item>
                    <img src='../../images/3761560063913_.pic_hd.jpg'/>
            </mt-swipe-item>
        </mt-swipe>
        <!--菜单展示区-->
        <!-- 修改网格单元 by qzn 20190625 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
                        <!-- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-if="UserRole=='调查员'"> -->
            <li class="mui-table-view-cell mui-media mui-col-xs-5 mui-col-sm-4" v-if="UserRole=='调查员'">
                <router-link  to="/home/reportByOther">
                    <!-- <span class="mui-icon iconfont icon-caifang-tianbaoren"></span> -->
                    <img src="../../images/dbsz.png" style="width:60px">
                    <div class="mui-media-body">代报设置</div>
                </router-link>
            </li>
            <!-- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> -->
            <li class="mui-table-view-cell mui-media mui-col-xs-5 mui-col-sm-4">
                    <router-link  to="/home/userList">
                        <!-- <span class="mui-icon iconfont icon-tianbao"></span> -->
                        <img src="../../images/bbtbsd.png" style="width:60px">
                        <div class="mui-media-body">报表填报审定</div>
                    </router-link>
            </li>
            <!-- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> -->
            <li class="mui-table-view-cell mui-media mui-col-xs-5 mui-col-sm-4">
                    <router-link  to="/home/FZBUserListContainer">
                        <!-- <span class="mui-icon iconfont icon-navicon-hzsb"></span> -->
                        <img src="../../images/fzb.png" style="width:60px">
                        <div class="mui-media-body">辅助表</div>
                    </router-link>
            </li>
            <!-- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link  to="/message">
                        <span class="mui-icon iconfont icon-tianjiashangbao"></span>
                        <div class="mui-media-body">上报</div>
                    </router-link>
            </li> -->
            <!-- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link  to="#">
                    <span class="mui-icon mui-icon-more-filled"></span>
                    <div class="mui-media-body">更多</div>
                </router-link>
            </li> -->
        </ul> 
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default{
        data() {
            return {
                lunbotuList:[
                    {
                        id: '123123',
                        image : '../../images/lunbotu.jpg',
                     },
                     {
                        id: '123112',
                        image : '../../images/4851559531656.jpg',
                     },
                ],//保存轮播图的数组
                UserRole: '',
            }
        },
        created() {
            //this.getLunbotu();
            this.UserRole = localStorage.getItem('UserRole');
        },
        methods: {
            getLunbotu(){//获取轮播图数据的方法
                this.$http.get('').then(result=>{
                    if(result.body.status === 0){
                        //成功
                        this.lunbotuList = result.body.message;
                    }else{
                        Toast("加载轮播图失败......");
                    }
                });
            }
        },
    }
</script>

<style lang="scss" scoped>
    .mint-swipe{
        height: 200px;   
        
        .mint-swipe-item{
            &:nth-child(1){
                background-color: black;
            }

            &:nth-child(2){
                background-color: blue;
            }

            &:nth-child(3){
                background-color: pink;
            }
        }
       img{
           width: 100%;
           height: 100%;
       }
      
    }

   .mui-grid-view.mui-grid-9{
       background-color: #efeff4;
       border: none;
   }
   .mui-grid-view.mui-grid-9.mui-table-view-cell{
       border: 0;
   }
</style>